<html>
	<head>
		<link rel="stylesheet" href="im.css">

		<script src="jquery-1.3.1.min.js"></script>
		<script src="jquery-ui-1.7.custom.min.js"></script>
		<script src="jquery.rpc.js"></script>
		
		<script>
			var zindex = 1;
			var id = 1;

			var initOffset = 10;
			var initXY = 30;


			function doit()
			{

				//get the HTML for a new im window
				var newHtml = $("#buddyTemplate").html();

				var newId = 'buddy' + id;

				//set the new ID to something unique
				newHtml = newHtml.replace("budId", newId );

				//add the new window to the page
				$("#container").append(newHtml);
				var sNewId = "#" + newId;

				//set the new window's title and make it draggable
				$(sNewId + " .buddyTitle").text("BUDDY WINDOW " + id);
				$(sNewId).draggable({"handle" : ".buddyHandle"});

				//offset the new window's position and show it
				$(sNewId).css("left", initXY + "px");
				$(sNewId).css("top", initXY + "px");
				initXY += initOffset;
				$(sNewId).show();
				$(sNewId + " .chatEntry").focus();

				//add event handler for enter key in the IM chat entry box
				$(sNewId + " .chatEntry").keyup( function(e) {
					if (e.which == 13) {
						var t = $(this).siblings(".budChat").val();
						var budChat = $(this).siblings(".budChat");

						//append the entered text to the buddy chat box
						var message = $(this).val();
						budChat.text(t + message);

						//clear the IM chat entry box
						$(this).val("");

						//send the message to the remote URL, using a dummy URL for now so will give javascript errors
						var data = { "message" : message };
						$.get("http://www.google.com", data);
					}
				});

				//close button event handler
				$(sNewId + " .closeButton").click( function() {
					$(this).closest(".buddyWindow").hide();
				});

				//give chat entry box focus and move window to front when selected
				$(sNewId).mousedown(function() {
					$(this).css("zIndex", zindex++);
					$(sNewId + " .chatEntry").focus();
				});

				//increment ID for next window
				id++;
			}
			
			$(document).ready(function(){
				var url = "/xmlrpc";
				var dataType = "xml";
				var onLoadCallback = function(server) { /* this is executed when the rpc server is prepared */
					   /* The rpc server should have a system object .. */
					   if(!server || !server.system) {

							$("#demo").change("Could not get the rpc object ..");
							return;
					   }
					   /* show the function list */
					   var demo = $("#demo");
					   var func = null;
					   for(func in server.system) {
							   demo.append(func + "(),");
					   }
				}
			
				$.rpc(url, dataType);//, onLoadCallback);
			});

		</script>

	</head>


	<body>

	<div id="container" style="height:100%; width:100%">

		<button onclick="doit()" >New Window</button>

			<div id="buddyTemplate">

				<div id="budId" class="buddyWindow">

					<div class="buddyHandle">
						<span class="buddyTitle"></span>
						<img class="closeButton" src="close-button.jpg"/>
					</div>

					<textarea class="budChat" readonly wrap="virtual"></textarea>

					<textarea class="chatEntry" wrap="virtual"></textarea>

				</div>

			</div>

		<div>

		<div id="demo">demo</div>
	</body>


</html>